<template>
  <div class="header-content">
    <span>返回</span>
    <span>{{ headerTitle }}</span>
    <span @click="handleShowHeaderDilog">...</span>
  </div>
</template>

<script>
export default {
  props: {
    headerTitle: {
      type: String,
      default: '成绩单', // 如果父组件不传递，就使用这个默认值
    },
  },
  methods: {
    handleShowHeaderDilog() {
      this.$emit('showHeaderDilog')
    },
  },
}
</script>

<style lang="scss" scoped>
// scoped.当前样式就只能在这个组件生效了
.header-content {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #eee;
  span {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
